<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>正圆运动效果</title>
	<style type="text/css">
		body {
			background-color: #eaf0f2;
		}
		h1{
			font-size: 14px;
			font-family: "Microsoft Yahei";
			text-align: center;
		}
		body{
		  background:#000;
		}
		.stage{
		  width:400px;
		  height:400px;
		  margin:100px auto;
		   background:url(http://p2.qhimg.com/t01d0bccc09b80b460d.jpg) no-repeat;
		  background-size: cover;
		}
		.rocketship{
		  width:130px;
		  height:250px;
		 background:url(http://p5.qhimg.com/t018efa521643aa9ede.png);
		  background-size: cover;
		  -webkit-transform-origin:  200% center;
		  transform-origin:  200% center;
		  -webkit-animation:circle 1s infinite linear;
		}
		@-webkit-keyframes circle{
		  to{
		    -webkit-transform:rotate(1turn);
		    transform:rotate(1turn);
		  }
		}
	</style>
</head>
<body>
	<h1>请使用webkit内核标准浏览器查看效果</h1>
	<div class="stage">
		<div class="rocketship"></div>
	</div>
	<script type="text/javascript">
		var btn = document.querySelector('.btn');
		var flag = 1;
		btn.addEventListener('click',function(e){
		    e.preventDefault();
		    if(flag){
		      this.className = "btn open";
		      flag = 0;
		    }else{
		      this.className = "btn";
		      flag = 1;
		    }
		},false);
	</script>
</body>
</html>